<!-- UserList.vue -->
<template>
  <div>
    <ul v-if="data?.list">
      <li v-for="user in data.list" :key="user.id">
        {{ user.name }} - {{ user.age }}岁
      </li>
    </ul>

    <button :disabled="pagination.current === 1" @click="pagination.changeCurrent(pagination.current - 1)">
      上一页
    </button>
    <span> 第 {{ pagination.current }} 页 </span>
    <button :disabled="pagination.current === pageCount" @click="pagination.changeCurrent(pagination.current + 1)">
      下一页
    </button>
  </div>
</template>

<script  setup lang="ts">
import { computed } from 'vue'
import { useRequest, usePagination } from 'vue-request';
import { getUserList, UserResponse } from '../../model/UserPro.ts';


type Params = { current: number; pageSize: number }


const {
  data,
  loading,
  error,
  pagination,
} = useRequest<UserResponse, [Params]>(
  getUserList,
  {
    paginated: true,
    defaultParams: [{ current: 1, pageSize: 10 }],
  }
)

// 计算总页数
const pageCount = computed(() => {
  if (!data?.total) return 1
  return Math.ceil(data.total / pagination.pageSize)
})
</script>
